<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Vue的数据代理理解</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
    </head>

    <body>
        <!--
        TODO:利用调试控制台查看并分析数据代理
        1.前情提要：
            我们new Vue(options)时传入的那个data，被Vue收到了，放在了vm上名为_data。
        2.Vue中的数据代理：
            通过vm对象来对_data中属性的操作（读/写）
        2.Vue中的数据代理：
            通过vm对象来代理对_data中属性的操作（读/写）
        3.Vue中数据代理的好处：
            模板中可以更加方便的操作_data中的数据，例如：
                (1).若无数据代理：{{_data.name}}
                (2).若有数据代理：{{name}} ———————— 香！！！
        4.基本原理：
            遍历_data对象中所有的属性，通过Object.defineProperty()一个一个都添加到vm上。
            随后vm上就拥有了_data中所有的属性，且都有自己的getter/setter。
            getter/setter内部操作（读/写）的是_data中对应的属性。
        -->
        <div id="root">
            <p>{{title}}</p>
        </div>

        <script>
            Vue.config.productionTip = false;
            const vm = new Vue({
                el: '#root',
                data: {
                    title: 'Vue2',
                },
            });
            console.log(vm);
        </script>
    </body>
</html>
